<template>
  <div class="aqi-table">
    <h4 class="text-center">AQI参数上下限表</h4>
    <el-table
      :data="aqiList"
      size="default"
      :cell-style="tableRowClassName"
      class="table-row"
      table-layout="auto"
    >
      <el-table-column prop="chineseExplain" label="AQI等级" align="center" />
      <!--      <el-table-column prop="aqiExplain" label="AQI描述" show-overflow-tooltip />-->
      <el-table-column prop="so2Min" label="SO2最低限度" align="center" />
      <el-table-column prop="so2Max" label="SO2最高限度" align="center" />
      <el-table-column prop="coMin" label="CO最低限度" align="center" />
      <el-table-column prop="coMax" label="CO最高限度" align="center" />
      <el-table-column prop="spmMin" label="SPM最低限度" align="center" />
      <el-table-column prop="spmMax" label="SPM最高限度" align="center" />
      <el-table-column prop="aqiMin" label="AQI最低限度" align="center" />
      <el-table-column prop="aqiMax" label="AQI最高限度" align="center" />
    </el-table>
  </div>
</template>

<script setup>
import { useAqiStore } from '@/stores/aqi/aqi.js'
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue'
const aqiStore = useAqiStore()
const { aqiList } = storeToRefs(aqiStore)
const colors = {
  1: 'rgb(163 230 53)',
  2: 'rgb(250 204 21)',
  3: 'rgb(234 88 12)',
  4: 'rgb(185 28 28)',
  5: 'rgb(76 29 149)',
  6: 'rgb(146 64 14)'
}

const tableRowClassName = (row) => {
  return { 'background-color': colors[row.rowIndex + 1], color: 'white' }
}

onMounted(() => {
  aqiStore.getAqiList()
})
</script>

<style scoped lang="scss">
.aqi-table {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: left;
  .table-row {
    width: 950px;
    margin: auto;
    height: 280px;
  }
  .text-center {
    font-size: 18px;
    font-weight: bold;
    color: #6d6d70;
    margin-bottom: 20px;
    text-align: center;
  }
}
</style>
